<template>
	<view class="container">
		<view class="d-flex-col">
			<view class="sun-label-text w-100">
				<view class="label">
					团购类型
				</view>
				<view class="text">
					{{groupBuy.groupBuyTypeName}}
				</view>
			</view>
			<view class="sun-label-text w-50">
				<view class="label">
					成团人数
				</view>
				<view class="text">
					{{groupBuy.needCount}}
				</view>
			</view>
			<view class="sun-label-text w-50">
				<view class="label">
					当前人数
				</view>
				<view class="text">
					{{groupBuy.currentCount}}
				</view>
			</view>
			<view class="sun-label-text w-50">
				<view class="label">
					拼团获得
				</view>
				<view class="text">
					{{groupBuy.chiefProfit}} 元
				</view>
			</view>
			<!-- <view class="sun-label-text w-50">
				<view class="label">
					参团奖励
				</view>
				<view class="text">
					{{groupBuy.groupBuyTypeMemberProfit}} 元
				</view>
			</view> -->
			<view class="sun-label-text w-50">
				<view class="label">
					联系人
				</view>
				<view class="text">
					{{groupBuy.linkMan}}
				</view>
			</view>
			<!-- <view class="sun-label-text w-50">
				<view class="label">
					联系电话
				</view>
				<view class="text">
					{{groupBuy.phoneNumber}}
				</view>
			</view> -->
			<view class="sun-label-text w-50">
				<view class="label">
					开团日期
				</view>
				<view class="text">
					{{groupBuy.creationTime | formatDate}}
				</view>
			</view>
			<view class="sun-label-text w-50">
				<view class="label">
					截止日期
				</view>
				<view class="text">
					{{groupBuy.endDate | formatDate}}
				</view>
			</view>
		</view>
		<view class="ct" v-if="groupItems.length>0">
			<view class="ct-title">
				参团人员
			</view>
			<uni-list>
				<uni-list-item v-for="(item) in groupItems" :key="item.id" :thumb="item.joinUser.avatar | absUrl" :title="item.joinUser.name" :right-text="item.creationTime | formatDate"></uni-list-item>
			</uni-list>
		</view>
		<view class="no-data" v-if="groupItems.length == 0">
			暂无参团人员
		</view>
		<!-- <view class="btn-box">
			<button class="btn btn-primary" @click="navBack" type="default"><text class="iconfont">&#xe660;</text>返回</button>
		</view> -->
		<view class="botton-nav">
			<button class="btn btn-kefu" open-type="share"  type="default">转发朋友</button>
			<button v-if="user.id != groupBuy.creatorUserId" class="btn btn-tuan" @click="joinGroup" type="default">参与团购</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupBuy: {
					groupBuyTypeId: 0,
					groupBuyTypeName: '',
					floorId: 0,
					needCount: 0,
					currentCount: 0,
					chiefProfit: 0,
					endDate: null,
					state: 0,
					wantVillage: '',
					wantLayer: '',
					wantLayout: '',
					linkMan: '',
					phoneNumber: '',
					creationTime: null,
					creatorUserId: 0,
					id: 0
				},
				groupItems:[]
			};
		},
		onLoad(e) {
			if (e.group) {
				Object.assign(this.groupBuy,JSON.parse(decodeURIComponent(e.group)));
				this.getGroupItems();
			}
			if (e.id) {
				//this.groupBuy.id = e.id;
				this.$http.get('/api/services/app/GroupBuy/Get?id=' + e.id)
				.then(res=>{
					this.groupBuy = res.data.result;
					this.getGroupItems();
				});
				
			}
		},
		onShareAppMessage() {
			return {
				title: this.groupBuy.title,
				path: '/pages/group-detail/group-detail?id=' + this.groupBuy.id
			}
		},
		onShareTimeline() {
			return {
				title: this.groupBuy.title,
				query: {
					id: this.groupBuy.id
				}
			}
		},
		methods:{
			navBack(){
				uni.navigateBack({
					delta:1
				})
			},
			getGroupItems(){
				this.$http.get('/api/services/app/GroupItem/GetAllListByBuyId?id=' + this.groupBuy.id)
				.then(res=>{
					this.groupItems = res.data.result;
				})
			},
			joinGroup(){
				let self = this;
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login"
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/join-group/join-group?id=' + self.groupBuy.id,
					events:{
						joinGroupSuccess(){
							self.getGroupItems();
						}
					}
				})
			}
		},
		computed: {
			user() {
				return this.$store.state.session.user;
			},
			hasLogin() {
				return this.$store.state.session.hasLogin;
			}
		}
	}
</script>

<style lang="scss">
.ct{
	margin: 16rpx auto;
	.ct-title {
		margin: 16rpx auto;
		font-size: 16px;
	}
}
</style>
